<extend name="Common:base" />
<block name="head"></block>
<block name="body">
    <div id="app" class="container">
        <div class="wrapp" v-show="show" style="display: none">
            <!-- seach form -->
            <el-row>
                <el-col :span="12">
                    <el-form :inline="true"  ref="searchForm" :model="searchForm">
                      <el-form-item style="display: none;" prop="id">
                        <el-input  v-model="searchForm.id">
                       </el-input>
                      </el-form-item>
                      
                      <el-form-item prop="name" >
                        <el-input   placeholder="请输入单位名"  v-model="searchForm.name">
                        </el-input>
                      </el-form-item>
                      <el-form-item>
                        <el-button type="primary" icon="search" @click="loadDatalist" >查询</el-button> 
                        <el-tooltip content="清空搜索框并刷新表格数据" placement="right">
                         <el-button icon="close" @click="searchReset">重置</el-button>
                        </el-tooltip>
                        <!-- <el-button  @click="openDialog('advancedSearch')" icon="search">高级查询</el-button>  -->
                      </el-form-item>
                    </el-form>
                </el-col>
                <el-col :span="12">
                </el-col>   
            </el-row>
            <!-- / search form -->

            <!-- datatables  -->
            <el-row>
                <el-col :span="24">
                    <el-table 
                    :data="dataList" 
                    border     
                    v-loading="dataLoad"
                    element-loading-text="{:L('DATA_LOGIN')}">

                        <el-table-column label="序号"  align="center" width="65" :formatter="handleIndex"  >
                        </el-table-column>

                        <el-table-column   label="名称"  prop="name" width="180">
                        </el-table-column>
                        
                    
                        <el-table-column label="备注" align="center" prop="brief" >
                        </el-table-column>

                        <el-table-column  :context="_self"  align="center" width="250"   label="操作"  >
                          <template scope="scope">
                            <el-button type="success" @click="handleEdit(scope.$index, scope.row)"     size="small">编辑</el-button>
                            <el-button type="danger"  @click="handleDelete(scope.$index, scope.row)"   size="small" >删除</el-button>
                          </template>
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-row>
            <!-- / datatables  -->
            

            <!-- toolbar -->
            <el-row type="type"  justify="space-between" align="middle"  class="row-bg">
              <el-col :span="12">
              <div class="grid-content bg-purple">
                <span class="wrapper">
                    <el-tooltip content="事业区" placement="right">
                        <el-button size="small"  @click="openDialog('add')" icon="plus" type="primary">添加</el-button>
                        <!-- <el-button  @click="">录入客户</el-button>
                        <el-button  @click="">修改客户</el-button> -->
                        <!-- <el-button>计划</el-button>
                        <el-button>推介</el-button> -->
                    </el-tooltip>
                </span>
              </div>
              </el-col>
              <el-col :span="12">
                  <div class="grid-content bg-purple-light pull-right">
                    <!-- page -->
                    <include file="Common:_pagination" />
                    <!-- / page -->
                  </div>
              </el-col>
            </el-row>
            <!-- / toolbar -->

        </div>

        <div v-show="show" style="display: none">
           

            <!-- 添加 -->
            <include file="_add" />
            <!-- / 添加 -->

            <!-- 编辑 -->
            <include file="_edit" />
            <!-- / 编辑 -->


        </div>


    </div>
</block>
<block name="scripts">
<script>
    page.getUsersUrl = "{:U('getUsers')}";


</script>
<script>
    window.defaultOption.setDatas({
        rules:{
            name:[
                { required: true, message: '请输入名称', trigger: 'blur' },
                {  max: 20, message: '长度在 20 字符之内', trigger: 'blur' }
            ],
            brief:[
            {  max: 200, message: '长度在 200 字符之内', trigger: 'blur' }
            ]
        },
        dm:[]
    }).setForm('add', {
        name:"",
        user_id:null,
        brief:""
    }).setForm('edit', {
        id:"",
        name:"",
        user_id:null,
        brief:""
    }).setForm('search', {
        name:"",
        id:"0",
        sortFiled:"id",
        sortWay:"asc" // desc
    }).setMethod('getUser', function(v){
        this.$http.get(page.getUsersUrl,{params:{id:v}}).then(function(response){
          this.dm = response.body;
        }, function(response){

        });
    }).setMethod('beforeOpen', function(){
        this.getUser(0);
    }).setMethod('beforeEdit', function(){
        console.log(this.editForm);
        this.getUser(this.editForm.user_id);
    })
</script>

    
</block>